<template>
  <div class="home-container">
    <!-- Welcome banner -->
    <div class="welcome-banner">
      <div class="banner-content">
        <h1>欢迎使用智能音箱管理系统</h1>
        <p>轻松管理音频设备、监控数据、分析诊断一站式解决方案</p>
        <el-button type="primary" size="large" icon="el-icon-data-analysis" @click="goToAnalysis">
          查看数据分析
        </el-button>
      </div>
      <div class="banner-image">
        <img src="@/assets/dashboard-illustration.svg" alt="Dashboard" />
      </div>
    </div>

    <!-- Quick stats cards -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: rgba(24, 144, 255, 0.1)">
              <i class="el-icon-cpu" style="color: #1890ff"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.deviceCount }}</div>
              <div class="stat-label">在线设备</div>
            </div>
            <div class="stat-trend positive">
              <i class="el-icon-top"></i>
              {{ stats.deviceIncrease }}%
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: rgba(82, 196, 26, 0.1)">
              <i class="el-icon-data-analysis" style="color: #52c41a"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.dataPoints }}</div>
              <div class="stat-label">数据点</div>
            </div>
            <div class="stat-trend positive">
              <i class="el-icon-top"></i>
              {{ stats.dataIncrease }}%
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: rgba(250, 173, 20, 0.1)">
              <i class="el-icon-warning" style="color: #faad14"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.alertCount }}</div>
              <div class="stat-label">活跃告警</div>
            </div>
            <div class="stat-trend negative">
              <i class="el-icon-bottom"></i>
              {{ stats.alertDecrease }}%
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: rgba(245, 34, 45, 0.1)">
              <i class="el-icon-document" style="color: #f5222d"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.taskCount }}</div>
              <div class="stat-label">待处理任务</div>
            </div>
            <div class="stat-trend negative">
              <i class="el-icon-bottom"></i>
              {{ stats.taskDecrease }}%
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- Main dashboard content -->
    <el-row :gutter="24">
      <!-- Activity chart -->
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <div class="card-title-area">
                <span class="card-title">设备活跃度</span>
                <el-tag size="small" effect="plain" type="info">过去30天</el-tag>
              </div>
              <div class="card-actions">
                <el-radio-group v-model="chartTimeRange" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里放置图表组件 -->
            <div class="chart-placeholder">
              <div class="chart-bars">
                <div v-for="(value, index) in activityData" :key="index" 
                     class="chart-bar" 
                     :style="{ height: value + '%' }">
                </div>
              </div>
              <div class="chart-labels">
                <span v-for="(day, index) in activityLabels" :key="index">{{ day }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- Recent alerts -->
      <el-col :span="8">
        <el-card class="alert-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">最近告警</span>
              <router-link to="/feedback">
                <el-button type="text">查看全部</el-button>
              </router-link>
            </div>
          </template>
          <div class="alert-list">
            <div class="alert-item" v-for="(item, index) in recentAlerts" :key="index">
              <div class="alert-icon" :class="'alert-' + item.level"></div>
              <div class="alert-content">
                <div class="alert-title">{{ item.title }}</div>
                <div class="alert-info">{{ item.device }} · {{ item.time }}</div>
              </div>
              <el-button type="text" size="small" class="alert-action" @click="handleAlert(item)">
                处理
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- Quick access and recent tasks -->
    <el-row :gutter="24" class="bottom-row">
      <el-col :span="12">
        <el-card class="quick-access-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">快速访问</span>
            </div>
          </template>
          <div class="quick-access-grid">
            <div class="quick-access-item" v-for="(item, index) in quickAccess" :key="index" @click="navigateTo(item.path)">
              <div class="quick-access-icon">
                <i :class="item.icon"></i>
              </div>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="tasks-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">待办任务</span>
              <el-button type="text" @click="createTask">新增任务</el-button>
            </div>
          </template>
          <div class="tasks-list">
            <div class="task-item" v-for="(task, index) in tasks" :key="index">
              <el-checkbox v-model="task.done" @change="taskStatusChanged(task)"></el-checkbox>
              <div class="task-content" :class="{ 'task-done': task.done }">
                <div class="task-title">{{ task.title }}</div>
                <div class="task-meta">
                  <el-tag size="small" :type="task.priority">{{ getPriorityLabel(task.priority) }}</el-tag>
                  <span class="task-due">{{ task.dueDate }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      chartTimeRange: 'month',
      stats: {
        deviceCount: 124,
        deviceIncrease: 12,
        dataPoints: '32.5K',
        dataIncrease: 23,
        alertCount: 18,
        alertDecrease: 5,
        taskCount: 9,
        taskDecrease: 12
      },
      activityData: [30, 42, 25, 65, 45, 55, 40, 70, 60, 35, 40, 80, 70, 65],
      activityLabels: ['1日', '3日', '5日', '7日', '9日', '11日', '13日', '15日', '17日', '19日', '21日', '23日', '25日', '27日'],
      recentAlerts: [
        { id: 1, level: 'critical', title: '设备A123无响应', device: '音频处理器', time: '10分钟前' },
        { id: 2, level: 'warning', title: '硬盘空间不足', device: '存储服务器', time: '25分钟前' },
        { id: 3, level: 'info', title: '系统自动更新完成', device: '控制中心', time: '1小时前' },
        { id: 4, level: 'warning', title: '温度超过阈值', device: '功放设备', time: '2小时前' }
      ],
      quickAccess: [
        { name: '设备管理', path: '/device', icon: 'el-icon-cpu' },
        { name: '反馈中心', path: '/feedback', icon: 'el-icon-chat-dot-square' },
        { name: '数据分析', path: '/analysis', icon: 'el-icon-data-analysis' },
        { name: '公告运营', path: '/content', icon: 'el-icon-bell' },
        { name: '资源库', path: '/resource', icon: 'el-icon-folder' },
        { name: '用户管理', path: '/user', icon: 'el-icon-user' }
      ],
      tasks: [
        { id: 1, title: '更新设备固件', priority: 'danger', dueDate: '今天', done: false },
        { id: 2, title: '审核新用户申请', priority: 'warning', dueDate: '明天', done: false },
        { id: 3, title: '检查系统备份', priority: 'primary', dueDate: '本周五', done: true },
        { id: 4, title: '编写月度报告', priority: 'info', dueDate: '下周一', done: false }
      ]
    }
  },
  methods: {
    goToAnalysis() {
      this.$router.push('/analysis');
    },
    handleAlert(alert) {
      // 处理告警的逻辑
      this.$message.success(`正在处理告警: ${alert.title}`);
    },
    navigateTo(path) {
      this.$router.push(path);
    },
    createTask() {
      // 创建新任务的逻辑
      this.$message.info('打开新建任务对话框');
    },
    taskStatusChanged(task) {
      // 任务状态变更的逻辑
      const status = task.done ? '完成' : '恢复';
      this.$message.success(`任务"${task.title}"已${status}`);
    },
    getPriorityLabel(priority) {
      const labels = {
        'danger': '紧急',
        'warning': '重要',
        'primary': '中等',
        'info': '普通'
      };
      return labels[priority] || priority;
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 12px 0;
}

/* 欢迎横幅 */
.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  color: white;
  border-radius: 12px;
  padding: 32px 40px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: skewX(-20deg);
}

.banner-content {
  z-index: 1;
  max-width: 60%;
}

.banner-content h1 {
  font-size: 28px;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.banner-content p {
  font-size: 16px;
  margin: 0 0 24px 0;
  opacity: 0.9;
  line-height: 1.6;
}

.banner-image {
  z-index: 1;
  max-width: 35%;
}

.banner-image img {
  max-width: 100%;
  height: auto;
}

/* 数据统计卡片 */
.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #1890ff, #1890ff33);
  transition: width 0.3s;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}

.stat-trend.positive {
  color: #52c41a;
  background-color: rgba(82, 196, 26, 0.1);
}

.stat-trend.negative {
  color: #f5222d;
  background-color: rgba(245, 34, 45, 0.1);
}

.stat-trend i {
  margin-right: 4px;
  font-size: 12px;
}

/* 图表卡片 */
.chart-card, .alert-card, .quick-access-card, .tasks-card {
  height: 100%;
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title-area {
  display: flex;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
}

.chart-container {
  height: 300px;
  display: flex;
  flex-direction: column;
}

/* 图表占位符 */
.chart-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.chart-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 10px;
}

.chart-bar {
  width: 16px;
  background: linear-gradient(to top, #1890ff, #722ed1);
  border-radius: 4px;
  transition: height 1s ease-out;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 10px;
  color: #909399;
  font-size: 12px;
}

/* 告警列表 */
.alert-list {
  max-height: 300px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background-color: #f9f9f9;
  transform: translateX(5px);
}

.alert-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
}

.alert-critical {
  background-color: #f5222d;
  box-shadow: 0 0 10px rgba(245, 34, 45, 0.5);
}

.alert-warning {
  background-color: #faad14;
}

.alert-info {
  background-color: #1890ff;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: #303133;
}

.alert-info {
  color: #909399;
  font-size: 12px;
}

.alert-action {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.alert-item:hover .alert-action {
  opacity: 1;
}

/* 快速访问网格 */
.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.quick-access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
}

.quick-access-item:hover {
  background-color: #f0f7ff;
  transform: translateY(-5px);
}

.quick-access-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  color: white;
  transition: all 0.3s;
}

.quick-access-item:hover .quick-access-icon {
  transform: scale(1.1);
}

.quick-access-icon i {
  font-size: 24px;
}

/* 任务列表 */
.tasks-list {
  max-height: 230px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
}

.task-item:last-child {
  border-bottom: none;
}

.task-item:hover {
  background-color: #f9f9f9;
}

.task-content {
  flex: 1;
  margin-left: 12px;
}

.task-title {
  font-weight: 500;
  margin-bottom: 6px;
  transition: all 0.3s;
}

.task-done .task-title {
  color: #909399;
  text-decoration: line-through;
}

.task-meta {
  display: flex;
  align-items: center;
}

.task-due {
  margin-left: 8px;
  font-size: 12px;
  color: #909399;
}

.bottom-row {
  margin-bottom: 24px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .welcome-banner {
    flex-direction: column;
    padding: 24px;
  }
  
  .banner-content {
    max-width: 100%;
    margin-bottom: 24px;
  }
  
  .banner-image {
    max-width: 80%;
  }
  
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 